<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" ref="filterRef" size="mini" class="form-filter" label-width="90px">
            <el-form-item label="搜索类型" style="display:block;">
                <el-button-group>
                    <el-button :type="searchType == SEARCH_TYPE_BY_DATE ? 'primary': ''" icon=""
                        @click="switchSearchType(SEARCH_TYPE_BY_DATE)">日期搜索</el-button>
                    <el-button :type="searchType == SEARCH_TYPE_BY_PRECISE ? 'primary': ''"
                        @click="switchSearchType(SEARCH_TYPE_BY_PRECISE)">精确搜索</el-button>
                </el-button-group>
            </el-form-item>

            <div v-show="searchType == SEARCH_TYPE_BY_DATE">
                <el-form-item label="日期" prop="dateRange" style="display:block;">
                    <div style="display:flex;">
                        <div>
                            <el-button-group>
                                <el-button :type="index == dateIndex ? 'primary': ''"
                                    v-for="(item,index) in todayOptions" :key="index" @click="selDate(index)"
                                    size="small">{{item.name}}</el-button>
                            </el-button-group>
                        </div>
                        <div style="margin-left:10px;">
                            <el-date-picker type="daterange" v-model="filter.range.dateRange" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"
                                range-separator="至" clearable size="small" @change="selDateRange">
                            </el-date-picker>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="线路" style="display:block;">
                    <el-checkbox-group v-model="filter.range.lineIds">
                        <el-checkbox v-for="(item, index) in lineOptions" :key="index" :label="item.id">
                            {{item.lineName}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="时间">
                    <el-select v-model="filter.range.timeArr" multiple clearable filterable>
                        <el-option v-for="item in timeOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态" @change="getPage()">
                    <el-select v-model="filter.range.status" filterable clearable>
                        <el-option v-for="item in Dict.enums.ticketOrderStatus" :key="item.code" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="司机">
                    <el-select v-model="filter.range.driverId" filterable clearable>
                        <el-option v-for="item in driverOptions" :key="item.id" :label="item.driverName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付状态" @change="getPage()">
                    <el-select v-model="filter.range.payStatus" filterable clearable>
                        <el-option v-for="item in Dict.enums.payStatus" :key="item.code" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </el-form-item>

                <el-form-item label="支付方式" @change="getPage()">
                    <el-select v-model="filter.range.payType" filterable clearable>
                        <el-option v-for="item in Dict.enums.payType" :key="item.code" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </el-form-item>

                <el-form-item label="分账状态" @change="getPage()">
                    <el-select v-model="filter.range.profitSharingStatus" filterable clearable>
                        <el-option v-for="item in Dict.enums.profitSharingStatus" :key="item.code" :label="item.name"
                            :value="item.code" />
                    </el-select>
                </el-form-item>

                <el-form-item label="是否改签" @change="getPage()">
                    <el-select v-model="filter.range.changeTicketStatus" filterable clearable>
                        <el-option :key="true" label="已改签" :value="true" />
                        <el-option :key="false" label="未改签" :value="false" />
                    </el-select>
                </el-form-item>

                <el-form-item label="是否评论" @change="getPage()">
                    <el-select v-model="filter.range.commentStatus" filterable clearable>
                        <el-option :key="true" label="已评论" :value="true" />
                        <el-option :key="false" label="未评论" :value="false" />
                    </el-select>
                </el-form-item>

                <el-form-item label="是否对账" @change="getPage()">
                    <el-select v-model="filter.range.reconciliationStatus" filterable clearable>
                        <el-option :key="true" label="已对账" :value="true" />
                        <el-option :key="false" label="未对账" :value="false" />
                    </el-select>
                </el-form-item>

            </div>
            <div v-show="searchType == SEARCH_TYPE_BY_PRECISE">
                <el-form-item label="订单号" @change="getPage()">
                    <el-input v-model="filter.accurate.orderNo" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="交易单号" @change="getPage()">
                    <el-input v-model="filter.accurate.transactionId" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="UID" @change="getPage()">
                    <el-input v-model="filter.accurate.uid" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="手机号" @change="getPage()">
                    <el-input v-model="filter.accurate.contactsPhone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="班次编码" @change="getPage()">
                    <el-input v-model="filter.accurate.arrangeCode" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="班次段编码" @change="getPage()">
                    <el-input v-model="filter.accurate.arrangeSectionCode" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="车牌号" @change="getPage()">
                    <el-input v-model="filter.accurate.licensePlateNumber" placeholder="请输入" />
                </el-form-item>
            </div>

            <el-form-item label=" ">
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                <el-button @click="resetFilter" icon="el-icon-refresh-left">重置</el-button>
                <el-button @click="toAddOrder()" icon="el-icon-plus">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <div class="order-list">
                <div v-for="(item,index) in page.records" :class="item.status> 1?'item-success':'item-warning'">
                    <el-row class="tit">
                        <el-col class="left" :span="18">
                            {{item.orderNo}}
                            <el-tag :type="item.payStatusStyle" size="mini">{{item.payStatusName}}</el-tag>
                            <el-tag :type="item.statusStyle" size="mini">{{item.statusName}}</el-tag>
                            <el-tag type="danger" v-if="item.changeTicketStatus" size="mini">已改签</el-tag>
                        </el-col>
                        <el-col class="right" :span="6">{{item.createTime}}</el-col>
                    </el-row>
                    <el-row class="info">
                        <el-col class="left">
                            <div>
                                <b>
                                    {{item.lineSectionName}}
                                    <span class="mar" style="color:#1E78CD">{{item.startTime}}出发</span>
                                    <span class="mar">
                                        {{item.driverName}} <a style="color:#1E78CD">{{item.driverPhone}}</a>
                                        {{item.licensePlateNumber}}
                                    </span>
                                </b>
                            </div>
                            <div>
                                联<em style="padding-left:0.5em;"></em>系<em style="padding-left:0.5em;"></em>人：{{item.contactsName}}
                                <a @click="lookContactsPhone(item.orderNo)" style="color:#1E78CD">{{item.contactsPhone}}</a>
                                <span class="mar">座位：{{item.seatNames}}</span>
                            </div>
                            <div>出发地址：{{item.startCityName}}{{item.startDistrictName}}{{item.startAddress}}</div>
                            <div>到达地址：{{item.endCityName}}{{item.endDistrictName}}{{item.endAddress}}</div>
                            <div>乘客备注：<span style="color:#900;">{{item.userRemark}}</span></div>
                            <div>客服备注：<span style="color:#900;">{{item.serviceRemark}}</span></div>
                        </el-col>
                        <el-col class="right">
                            <table class="row1" style="border-bottom:1px solid #EEE;">
                                <tr>
                                    <td>总计：</td>
                                    <td><em>{{item.totalMoney/100}}</em>元</td>
                                    <td>应付：</td>
                                    <td><em>{{item.shouldPayMoney/100}}</em>元</td>
                                    <td>已退：</td>
                                    <td><em>{{item.refund_money?item.refund_money:0}}</em>元</td>
                                </tr>
                                <tr>
                                    <td>座位费：</td>
                                    <td>{{item.seatMoney/100}}元</td>
                                    <td>优惠费：</td>
                                    <td>{{item.discountMoney/100}}元</td>
                                    <td>其他补单：</td>
                                    <td>0元</td>
                                </tr>
                            </table>
                            <table class="row2">
                                <tr>
                                    <td>接附加费：</td>
                                    <td>{{item.startAddressAppendMoney/100}}元</td>
                                    <td>送附加费：</td>
                                    <td>{{item.endAddressAppendMoney/100}}元</td>
                                </tr>
                                <tr>
                                    <td>按距离计费接：</td>
                                    <td>{{item.startAddressFlowMoney/100}}元</td>
                                    <td>按距离计费送：</td>
                                    <td>{{item.endAddressFlowMoney/100}}元</td>
                                </tr>
                            </table>
                        </el-col>
                    </el-row>
                    <el-row class="btn">
                        <el-col :span="8" class="left">
                            <el-button size="mini" :type="item.btnIndex==2?'primary':''">
                                接送单<i :class="(item.btnIndex==2?'el-icon-arrow-up':'el-icon-arrow-down') + ' el-icon--right'"></i>
                            </el-button>

                        </el-col>
                        <el-col :span="16" class="right">
                            <el-button size="mini" @click="showEditServiceRemark(item)">客服备注</el-button>
                            <el-button size="mini" v-if="item.status > 1" @click="$router.push({name: 'TicketOrderChange',query: {orderNo:item.orderNo}})">改签</el-button>
                            <el-button size="mini" v-if="item.status > 1" @click="showCancelOrder(item.orderNo)">取消订单</el-button>
                            <el-button size="mini" v-if="item.take_order_type == 2"
                                @click="confirmCancelOrder(item.order_no)">取消订单</el-button>

                            <el-button size="mini" @click="showDetail(item.orderNo)">详情</el-button>
                        </el-col>
                    </el-row>

                    <div v-if="item.flowList && item.btnIndex==2" class="table">
                        <el-table :data="item.flowList" class="table" border :header-cell-style="headerCellStyle">
                            <el-table-column prop="id" label="分流单号">
                            </el-table-column>
                            <el-table-column prop="travel_time_str" label="接人时间">
                            </el-table-column>
                            <el-table-column prop="start_address" label="出发地址">
                            </el-table-column>
                            <el-table-column prop="end_address" label="到达地址">
                            </el-table-column>

                            <el-table-column prop="flow_distance" label="分流距离(千米)">
                            </el-table-column>
                            <el-table-column prop="flow_time" label="分流时间(分)">
                            </el-table-column>

                            <el-table-column label="司机信息">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.driver_id">
                                        {{scope.row.driver_name}}({{scope.row.driver_phone}})
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status_str" label="状态">
                            </el-table-column>
                            <el-table-column label="操作" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-edit"
                                        @click="showAppointDrvierDlg(scope.row,index)"
                                        v-if="item.order_long_distance_status> 1">指派司机</el-button>
                                </template>

                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

            <el-pagination
                background :current-page="page.current" :page-sizes="[10, 20, 30, 50,100]" :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total" style="margin-top:20px;"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <Detail ref="detailRef" />
    </section>
</template>
<script>
    import {
        TicketOrderApi
    } from '@/api/intercity/TicketOrderApi'
    import {
        DriverApi
    } from '@/api/user/DriverApi'
    import {
        LineApi
    } from '@/api/intercity/LineApi'
    import {
        Common
    } from '@/utils/common'
    import Detail from './detail.vue'

    export default {
        name: 'TicketOrderIndex',
        components: {
            Detail
        },
        data() {
            return {
                page: {
                    total: 0,
                    size: 10,
                    current: 1,
                    pages: 0,
                    records: []
                },
                filter: {
                    range: {
                        dateRange: [],
                        lineIds: [],
                        timeArr: [],
                        status: '',
                        driverId: '',
                        payStatus: '',
                        payType: '',
                        profitSharingStatus: '',
                        changeTicketStatus: '',
                        commentStatus: '',
                        reconciliationStatus: '',
                    },
                    accurate: {
                        orderNo: '',
                        transactionId: '',
                        uid: '',
                        contactsPhone: '',
                        arrangeCode: '',
                        arrangeSectionCode: '',
                        licensePlateNumber: '',
                    }
                },
                initFilter: {},
                coordinate: {
                    column: -1,
                    row: -1
                },
                loading: false,
                headerCellStyle: {
                    "background-color": "#F2F5FC"
                },

                // 搜索类型 1日期搜索，2精确搜索
                searchType: 1,
                // 日期搜索
                SEARCH_TYPE_BY_DATE: 1,
                // 精确搜索
                SEARCH_TYPE_BY_PRECISE: 2,

                // 日期列表
                todayOptions: [],
                dateIndex: '',

                lineOptions: [],
                timeOptions: [],
                driverOptions: [],

                currentUrl:''
            }
        },
        created() {
            this.initFilter = Common.deepClone(this.filter)
            this.todayOptions = Common.todayOptions()
            this.timeOptions = Common.timeOptions()
            this.getLineList()
            this.getDriverOptions()

            this.refresh()
        },
        watch:{
            $route(to,from){
                if(to.name=='TicketOrderIndex' && this.currentUrl != location.href){
                    this.refresh()
                }
            }
        },
        methods: {
            //************筛选start*************
            switchSearchType(type) {
                this.searchType = type
                this.getPage()
            },
            selDate(index) {
                this.dateIndex = index
                this.filter.range.dateRange = [this.todayOptions[index].date, this.todayOptions[index].date]
                this.getPage()
            },
            selDateRange() {
                this.dateIndex = -1
                this.getPage()
            },
            resetFilter() {
                if (this.searchType == this.SEARCH_TYPE_BY_DATE) {
                    this.filter.range = this.initFilter.range
                    this.selDate(2)
                } else {
                    this.filter.accurate = this.initFilter.accurate
                    this.page.records = []
                }
            },
            //************筛选end*************

            refresh(){
                this.filter.accurate.arrangeCode = this.$router.currentRoute.query.arrangeCode
                this.filter.accurate.arrangeSectionCode = this.$router.currentRoute.query.arrangeSectionCode

                if(this.filter.accurate.arrangeCode || this.filter.accurate.arrangeSectionCode){
                    this.searchType = this.SEARCH_TYPE_BY_PRECISE
                }

                this.selDate(2)
                this.currentUrl = location.href
            },

            // 获取线路列表
            getLineList() {
                LineApi.getList().then((data) => {
                    this.lineOptions = data
                })
            },

            // 获取线路列表
            getDriverOptions() {
                DriverApi.getList({
                    status: true
                }).then((data) => {
                    this.driverOptions = data
                })
            },

            // 获取用户列表
            getPage() {
                const params = {
                    pageIndex: this.page.current,
                    pageSize: this.page.size
                }
                if (this.searchType == this.SEARCH_TYPE_BY_DATE) {
                    Object.assign(params, this.filter.range)
                    params['dateRange'] = [this.filter.range.dateRange[0] + 'T00:00:00', this.filter.range.dateRange[
                        1] + 'T23:59:59'
                    ]
                } else {
                    let isNull = true
                    for (let key in this.filter.accurate) {
                        if (this.filter.accurate[key]) {
                            isNull = false
                            break
                        }
                    }

                    if (isNull) {
                        this.page.records = []
                        this.page.pages = 0
                        return
                    }
                    Object.assign(params, this.filter.accurate)
                }

                this.loading = true
                TicketOrderApi.getPage(params).then((response) => {
                    response.records.forEach(function(item){
                        item.startTime = Common.timeFormat(item.startTime,4)
                    })
                    this.page = response
                    this.loading = false
                }).catch((err) => {
                    this.loading = false
                })
            },

            handleSizeChange(val) {
                this.page.size = val
                this.page.current = 1
                this.getPage()
            },

            handleCurrentChange(val) {
                this.page.current = val
                this.getPage()
            },

            toAddOrder() {
                this.$router.push({
                    name: 'TicketOrderCreate',
                    query: {}
                })
            },
            showEditServiceRemark(item) {
                let that = this
                this.$prompt('', '备注', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  inputType: 'textarea',
                  inputValue: item.serviceRemark,
                  closeOnClickModal:false,
                  closeOnPressEscape:false
                }).then(({ value }) => {
                    let data = {
                        "orderNo":item.orderNo,
                        "serviceRemark":value
                    }
                    TicketOrderApi.editServiceRemark(data).then(() => {
                        that.getPage()
                    })
                })
            },
            showCancelOrder(orderNo) {
                let that = this
                this.$prompt('', '取消原因', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  closeOnClickModal:false,
                  closeOnPressEscape:false
                }).then(({ value }) => {
                    let data = {
                        "orderNo":orderNo,
                        "logRemark":value
                    }
                    TicketOrderApi.cancel(data).then(() => {
                        that.getPage()
                    })
                })
            },
            showDetail(orderNo) {
                this.$refs['detailRef'].show(orderNo)
            },
            lookContactsPhone(orderNo) {
                TicketOrderApi.lookContactsPhone(orderNo).then((response) => {
                    this.$alert(response, '联系人手机号', {
                      confirmButtonText: '确定'
                    });
                }).catch((err) => {
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    ::v-deep .filter-len {
        display: flex;
    }

    ::v-deep .filter-len .el-form-item__content {
        flex: 1;
    }

    .order-list .mar {
        margin-left: 20px;
    }

    .order-list .item-success {
        border: 1px solid #dcdfe6;
        border-top: 8px solid #b0dc9e;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .order-list .item-success .tit {
        background: #dff0d8;
    }

    .order-list .item-warning {
        border: 1px solid #dcdfe6;
        border-top: 8px solid #eedc7c;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .order-list .item-warning .tit {
        background: #fcf8e3;
    }

    .order-list .tit {
        padding: 15px;
    }

    .order-list .tit .left .el-tag {
        margin-left: 10px;
    }

    .order-list .tit .right {
        text-align: right;
    }

    .order-list .info {
        line-height: 24px;
        padding: 15px;
        display: flex;
    }

    .order-list .info .left {
        flex: 1;
    }

    .order-list .info .right {
        text-align: left;
        width: 400px;
    }

    .order-list .info .right .row1 {
        width: 100%;
    }

    .order-list .info .right .row1 td {
        text-align: right;
    }

    .order-list .info .right .row1 td:nth-child(n) {}

    .order-list .info .right .row1 td:nth-child(2n) {
        text-align: left;
    }

    .order-list .info .right .row2 {
        width: 100%;
    }

    .order-list .info .right .row2 td {
        text-align: right;
    }

    .order-list .info .right .row2 td:nth-child(2n) {
        text-align: left;
    }

    .order-list .info .right em {
        color: #F00;
        font-style: normal;
    }

    .order-list .btn {
        border-top: 5px solid #F7F8F8;
    }

    .order-list .btn .left {
        padding: 15px;
    }

    .order-list .btn .right {
        text-align: right;
        padding: 15px;
    }

    .order-list .table {
        padding: 0 15px 15px 15px;
    }

    .link-type {
        margin-left: 10px;
    }
</style>
